<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="request-party-service-manage-body">

          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="dataSourceName">
              <el-input v-model="form.dataSourceName" clearable placeholder="数据源名称" />
            </el-form-item>
            <el-form-item prop="dataSourceType">
              <el-select v-model="form.dataSourceType" placeholder="所有数据源" clearable filterable>
                <el-option value="mysql" label="mysql数据库" />
                <el-option value="oracle" label="oracle数据库" />
                <el-option value="pgsql" label="pgsql数据库" />
                <el-option value="mssql" label="sqlServer数据库" />
                <el-option value="dm" label="dm数据库" />
              </el-select>
            </el-form-item>
            <el-form-item prop="systemId">
              <el-select v-model="form.systemId" placeholder="系统名称" clearable filterable>
                <el-option
                  v-for="(item, index) in systemIdList"
                  :key="index"
                  :label="item.systemCode + ' / ' + item.systemName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="query-action">
              <el-button type="primary" @click="getTableData"> 查询 </el-button>
              <el-button :loading="loading" @click="resetBtn"> 重置 </el-button>
              <el-button @click="addBtn"> 新增 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />

            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <!-- 添加或修改接口服务监测对话框 -->
        <el-dialog :title="title" :visible.sync="open" :is-loading="loading">
          <el-form ref="formRef" :model="row" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="11">
                <el-form-item label="数据源名称" prop="dataSourceName">
                  <el-input v-model.trim="row.dataSourceName" maxlength="40" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="系统名称" prop="systemId">
                  <el-select v-model="row.systemId" placeholder="系统名称" clearable filterable>
                    <el-option
                      v-for="(item, index) in systemIdList"
                      :key="index"
                      :label="item.systemCode + ' / ' + item.systemName"
                      :value="item.id"
                    /></el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>

              <el-col :span="11">
                <el-form-item label="数据源类型" prop="dataSourceType">
                  <el-select v-model="row.dataSourceType" placeholder="所有数据源" clearable filterable width="100%">
                    <el-option value="mysql" label="mysql数据库" />
                    <el-option value="oracle" label="oracle数据库" />
                    <el-option value="pgsql" label="pgsql数据库" />
                    <el-option value="mssql" label="sqlServer数据库" />
                    <el-option value="dm" label="dm数据库" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item label="ip地址" prop="jdbcIp">
                  <el-input v-model.trim="row.jdbcIp" maxlength="20" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>

              <el-col :span="11">
                <el-form-item label="端口号" prop="jdbcPort">
                  <el-input v-model.trim="row.jdbcPort" maxlength="6" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item label="数据库名" prop="jdbcName">
                  <el-input v-model.trim="row.jdbcName" maxlength="30" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model.trim="row.username" maxlength="30" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="密码" prop="password">
                  <el-input v-model.trim="row.password" type="password" maxlength="200" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="cron表达式" prop="cron">
              <el-row>
                <el-col :span="17">
                  <el-input v-model.trim="row.cron" readonly placeholder="请输入cron表达式" maxlength="30" show-word-limit class="limit" />
                </el-col>
                <el-col :span="4">
                  <el-button @click="addCron">生成表达式</el-button>
                  <dt-Vcrontab ref="vcrontabRef" v-model.trim="row.cron" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-row>
              <el-col :span="22">
                <el-form-item label="备注" prop="remarks">
                  <el-input v-model.trim="row.remarks" type="textarea" maxlength="200" placeholder="请输入内容" show-word-limit class="limit" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button v-show="showDetail" type="primary" @click="connect">测试连接</el-button>
            <el-button @click="close">取 消</el-button>
            <el-button v-show="showDetail" type="primary" :disabled="!canClick" :loading="!canClick" @click="submitForm">确 定</el-button>
          </span>
        </el-dialog>
        <monitor-log ref="monitorLog" />
      </div>
    </div>
  </div>
</template>

<script>
import databaseMonitorApi from '@/api/monitor/DatabaseMonitor'
import { getSystemListApi, pageApi } from '@/api/serviceManage/requestPartyServiceManage'
import MonitorLog from '@/views/serviceMonitor/monitorLog.vue'

export default {
  name: 'DataStateWatch',
  components: {
    MonitorLog
  },
  data () {
    return {
      // 弹出层标题
      title: '',
      operate: 'add',
      // 是否显示弹出层
      open: false,
      // 是否可提交
      canClick: false,
      showDetail: true,
      dataList: null,
      dialogVisible: false,
      form: {},
      loading: false,
      tableData: [],
      row: {},
      systemIdList: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '数据源名称', prop: 'dataSourceName' },
        { label: '数据源类型', prop: 'dataSourceType' },
        { label: '系统名称', prop: 'systemName' },
        { label: '数据源IP', prop: 'jdbcIp' },
        { label: '创建时间', prop: 'createTime' },
        { label: '创建人', prop: 'createUserName' },
        { label: '当前状态', prop: 'status' },
        { label: '状态更新时间', prop: 'updateTime' },
        { label: '备注', prop: 'remarks' },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button type='text' onClick={() => this.show(scope.row)}> 连接详情 </el-button>,
              <el-button type='text' onClick={() => this.edit(scope.row)}> 编辑 </el-button>,
              <el-button type='text' class='text-del-btn' onClick={() => this.delBtn(scope.row)}> 删除 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: null
      },
      // 表单校验
      rules: {
        dataSourceName: { required: true, message: '请输入数据源名称', trigger: 'blur' },
        systemId: { required: true, message: '请选择系统名称', trigger: 'change' },
        dataSourceType: { required: true, message: '请选择数据源类型', trigger: 'change' },
        jdbcIp: { required: true, message: '请输入ip地址', trigger: 'blur' },
        jdbcPort: { required: true, message: '请输入端口号', trigger: 'blur' },
        // jdbcName: { required: true, message: '请输入数据库名', trigger: 'blur' },
        username: { required: true, message: '请输入用户名', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
        cron: { required: true, message: '请设置cron表达式', trigger: 'change' }
      }
    }
  },
  created() {
    this.infoData()
    this.getTableData()
  },
  methods: {
    infoData() {
      getSystemListApi()
        .then(({ code, data }) => {
          if (code === '00000') {
            this.systemIdList = data
          }
        })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData() {
      this.setLoading(true)
      const params = {
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...this.form
      }
      databaseMonitorApi.listDatabaseMonitor(params).then(res => {
        const { code, data } = res
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        } else {
          this.showMessage('error', '无法获取表单数据')
        }
      }).finally(() => {
        this.setLoading(false)
      })
    },
    resetBtn() {
      this.form = {}
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      this.getTableData()
    },

    addBtn() {
      this.open = true
      this.title = '新增数据源信息'
      this.operate = 'add'
      this.showDetail = true
    },
    show(detail) {
      // this.row=detail;
      // this.open=true;
      // this.title="数据源信息详情";
      // this.operate='detail';
      // this.showDetail=false;
      this.$refs.monitorLog.init(detail.id, 1, detail.dataSourceName, detail.jdbcIp)
    },
    edit(detail) {
      this.row = detail
      this.open = true
      this.title = '修改数据源信息'
      this.operate = 'upd'
      this.showDetail = true
    },
    close() {
      this.row = []
      this.open = false
      this.canClick = false
      this.showDetail = false
    },
    submitForm() {
      if (this.operate == 'add') {
        this.row.status = '1'
        databaseMonitorApi.addDatabaseMonitor(this.row).then(res => {
          this.$message.success('新增数据源成功')
          this.getTableData()
          this.open = false
          this.canClick = false
        })
      } else {
        this.row.status = '1'
        databaseMonitorApi.updateDatabaseMonitor(this.row).then(res => {
          this.$message.success('修改数据源成功')
          this.getTableData()
          this.open = false
          this.canClick = false
        })
      }
    },
    delBtn(detail) {
      this.$confirm('此操作将删除数据源, 是否删除?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        databaseMonitorApi.deleteById(detail).then(res => {
          this.$message.success('删除成功')
          this.getTableData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    connect() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          databaseMonitorApi.connect(this.row).then(res => {
            this.$message.success('连接测试成功')
            this.canClick = true
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.manyId = val.map(item => item.id)
    },
    setLoading(loading) {
      this.loading = loading
    },
    addCron() {
      this.$refs.vcrontabRef.showDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

